<template>
    <div class="background-container">
      
      <div class="input-container">
        <el-autocomplete 
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="Please input"
          @select="handleSelect"
          class="custom-input"
        />
        <!-- <input v-model="input_value" class="custom-input" type="text" placeholder="请输入关键词">    -->
        <div class="query" @click="handleClick"></div>  
      </div>
      
      <div class="tag">
        <select v-model="selectedProvince" class="custom-select">
          <option value="" disabled selected>地区</option>
          <option v-for="item in provinces" :key="item.value" :value="item.value">
            {{ item.label }}
          </option>
        </select>

      <select v-model="selectedGender" class="custom-select">
        <option value="" disabled selected>性别</option>
        <option v-for="item in genders" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>

      <select v-model="selectedBatch" class="custom-select">
        <option value="" disabled selected>批次</option>
        <option v-for="item in batches" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>

      <select v-model="selectedPubTime" class="custom-select">
        <option value="" disabled selected>公布时间</option>
        <option v-for="item in pubtimes" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>

      <select v-model="selectedCategory" class="custom-select">
        <option value="" disabled selected>类别</option>
        <option v-for="item in categories" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>
      </div>
    
      <div class="background"></div>
      
    </div>
    
  </template>
  
<script>
  import { inject } from 'vue';
  import { onMounted, ref} from 'vue'
  import { useRouter } from 'vue-router';
  import { input_query_people,get_query_people } from '@/api/query.js';
  export default {
    name: 'AutocompleteComponent',
    setup(props, { emit }) {
    const router = useRouter();
    const state = ref('');
    const selectedProvince = ref('');
    const selectedGender = ref('');
    const selectedBatch = ref('');
    const selectedPubTime = ref('');
    const selectedCategory = ref('');

    const querySearchAsync = async (queryString, cb) => {
      if (!queryString) {
        cb([]);
        return;
      }
      try {
        const requestData = {
          province: selectedProvince.value,
          sex: selectedGender.value,
          time: selectedPubTime.value,
          category: selectedCategory.value,
          batch: selectedBatch.value,
          keyword: queryString // 确保使用 queryString 作为关键词
        };
        const response = await input_query_people(requestData);
        console.log(response)
        if (response) {
          // 转换后端返回的数据格式
          const suggestions = response.map(item => ({
            value: item.people_name,
            id: item.id
          }));
          cb(suggestions); // 传递转换后的数据
        } else {
          cb([]); // 返回空数组
        }
      } catch (error) {
        console.error('Failed to fetch suggestions:', error);
        cb([]); // 发生错误时返回空数组
      }
    };

    const handleSelect = (item) => {
      console.log('Selected item:', item);
      performCustomAction(item);
    };

    const handleClick = async () => {
      const data = {
        province: selectedProvince.value,
        sex: selectedGender.value,
        time: selectedPubTime.value,
        category: selectedCategory.value,
        batch: selectedBatch.value,
        keyword: state.value
      };
      try {
        const response = await get_query_people(data);
        console.log('查询成功:', response.status_code);
        emit('send-data', { response });
        router.push('/res');
      } catch (error) {
        console.error('查询失败:', error.message);
      }
    };

    const performCustomAction = async (item) => {
      console.log('Performing custom action with:', item);
      const data = {
        province: selectedProvince.value,
        sex: selectedGender.value,
        time: selectedPubTime.value,
        category: selectedCategory.value,
        batch: selectedBatch.value,
        keyword: state.value
      };
      try {
        const response = await get_query_people(data);
        console.log('查询成功:', response.status_code);  
        emit('send-data', { response });
        router.push('/res');
      } catch (error) {
        console.error('查询失败:', error.message);
      }
    };

    return {
      state,
      selectedProvince,
      selectedGender,
      selectedBatch,
      selectedPubTime,
      selectedCategory,
      querySearchAsync,
      handleSelect,
      handleClick
    };
  },
    data() {
      return {
        input_value:'',
        provinces: [
          { value: '1', label: '北京市' },
          { value: '2', label: '天津市' },
          { value: '3', label: '河北省' },
          { value: '4', label: '山西省' },
          { value: '5', label: '内蒙古自治区' },
          { value: '6', label: '辽宁省' },
          { value: '7', label: '吉林省' },
          { value: '8', label: '黑龙江省' },
          { value: '9', label: '上海市' },
          { value: '10', label: '江苏省' },
          { value: '11', label: '浙江省' },
          { value: '12', label: '安徽省' },
          { value: '13', label: '福建省' },
          { value: '14', label: '江西省' },
          { value: '15', label: '山东省' },
          { value: '16', label: '河南省' },
          { value: '17', label: '湖北省' },
          { value: '18', label: '湖南省' },
          { value: '19', label: '广东省' },
          { value: '20', label: '广西壮族自治区' },
          { value: '21', label: '海南省' },
          { value: '22', label: '重庆市' },
          { value: '23', label: '四川省' },
          { value: '24', label: '贵州省' },
          { value: '25', label: '云南省' },
          { value: '26', label: '西藏自治区' },
          { value: '27', label: '陕西省' },
          { value: '28', label: '甘肃省' },
          { value: '29', label: '青海省' },
          { value: '30', label: '宁夏回族自治区' },
          { value: '31', label: '新疆维吾尔自治区' },
          { value: '32', label: '新疆生产建设兵团' },
          { value: '33', label: '香港' },
          { value: '34', label: '澳门' },
          { value: '35', label: '中直单位' }
        ],
        genders: [
          { value: '1', label: '女' },
          { value: '2', label: '男' }
        ],
        batches: [
          { value: '1', label: '第一批' },
          { value: '2', label: '第二批' },
          { value: '3', label: '第三批' },
          { value: '4', label: '第四批' },
          { value: '5', label: '第五批' }
        ],
        pubtimes: [
          { value: '1', label: '2006年' },
          { value: '2', label: '2008年' },
          { value: '3', label: '2011年' },
          { value: '4', label: '2014年' },
          { value: '5', label: '2021年' }
        ],
        categories: [
          { value: '1', label: '民间文学' },
          { value: '2', label: '传统音乐' },
          { value: '3', label: '传统舞蹈' },
          { value: '4', label: '传统戏剧' },
          { value: '5', label: '曲艺' },
          { value: '6', label: '传统体育、游艺与杂技' },
          { value: '7', label: '传统美术' },
          { value: '8', label: '传统技艺' },
          { value: '9', label: '传统医药' },
          { value: '10', label: '民俗' }
        ],
        selectedProvince: '',
        selectedGender: '',
        selectedBatch: '',
        selectedPubTime: '',
        selectedCategory: ''
      }
    },
};
</script>
  
  <style scoped>
.background-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/query/back.png');
  background-attachment: fixed;
  background-size: 100vw 80vh;
  background-position: center;
  background-repeat: no-repeat;
}

.background {
  width: 100vw;
  height: 100vh;
  margin-top:0vh;
  background-image: url('../../assets/query/people.png');
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40vw;
  margin-top: 25vh;
}

.custom-input {
  flex: 1;
  height: 5vh;
  border: none;
  padding: 1vh;
  background: url('input.svg') no-repeat center center;
  background-size: cover;
  color: #000;
  font-size: 3vh;
  border-radius: 4vh;
}

.query {
  width: 2.5vw;
  height: 2.5vw;
  background-image: url('../../assets/query/search.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-left: 1vw;
}

.custom-input::placeholder {
  color: #999;
}

.tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin-top: 5vh;
}

.custom-select {
  width: 10vw;
  height: 5vh;
  margin: 1vh;
  background-color: transparent;
  color: #fff;
  border: 1px solid #6b4a2b;
  border-radius: 4px;
}

.custom-select option {
  background-color: #865c33;
  /* color: #fff; */
}

.custom-select option:hover {
  /* background-color: #865c33; */
  background-color: transparent;
}
</style>